<template>
    <view class="note-container">


        <!-- 内容区域 -->
        <scroll-view class="content-scroll" scroll-y="true">

            <!-- 轮播图部分 -->
            <swiper class="banner-swiper" circular :indicator-dots="true" :autoplay="true" interval="3000"
                duration="500">
                <swiper-item v-for="(item, index) in bannerList" :key="index">
                    <image :src="item" mode="aspectFill" class="banner-image"></image>
                </swiper-item>
            </swiper>

            <!-- 标题区域 -->
            <view class="title-section">
                <view class="main-title">【手工紫砂壶】正宗宜兴原矿...</view>
                <view class="view-count">
                    <image src="../static/img/album.png" mode="aspectFit" class="view-icon"></image>
                    <text>311浏览</text>
                </view>
            </view>

            <!-- 正文内容 -->
            <view class="content-section">
                <text class="paragraph">紫砂壶的矿有哪些呢，给你看看从矿到壶到30倍显微镜下颗粒呈现，每一种似同又不同，五彩缤纷，各展风采。</text>
                <text
                    class="paragraph">每一种矿都是独特的存在，而生成的壶必各有特点，呈色不同、颗粒不同、泡茶口感不同，喜欢壶的友们就永远缺一把。有了这个泥料，还得收那个泥料，忙得不亦乐乎！</text>
                <text class="paragraph">一下子集齐各款泥料的壶可能有点小压力，所以给大家准备了矿标杯，每一个杯对应着每一种矿料，先解了心头所好，然后再对应着矿标杯入壶，便有了更多的了解。</text>
                <text
                    class="paragraph">市场上不同颜色的杯，大小都一样，因为那其实是相同的泥加入不同的呈色化工料生成了颜色不同。而咱们的杯每个大小都不同，因为矿料所含物质不同，所以收缩都不同。</text>
                <text class="paragraph">上架连接里只有一款梁皮泥料的矿标杯，想要对应其他泥料可直接备注或找我哦。</text>
            </view>

            <!-- 评论区域 -->
            <view class="comment-section">
                <view class="comment-header">
                    <text class="comment-title">评论</text>
                    <text class="comment-count">(0)</text>
                </view>
                <!-- 这里可以添加评论列表 -->
            </view>

            <!-- 底部占位，防止内容被固定底栏遮挡 -->
            <view class="bottom-placeholder"></view>
        </scroll-view>

        <!-- 固定在底部的作者信息栏 -->
        <view class="author-bar">
            <view class="author-info">
                <image src="../static/img/album.png" mode="aspectFill" class="author-avatar"></image>
                <text class="author-name">逸尘轩·紫砂文化</text>
            </view>
            <view class="action-buttons">
                <view class="action-item">
                    <image src="../static/img/album.png" mode="aspectFit" class="action-icon"></image>
                    <text>2</text>
                </view>
                <view class="action-item">
                    <image src="../static/img/album.png" mode="aspectFit" class="action-icon"></image>
                    <text>2</text>
                </view>
                <view class="action-item">
                    <image src="../static/img/album.png" mode="aspectFit" class="action-icon"></image>
                    <text>1</text>
                </view>
                <view class="action-item">
                    <image src="../static/img/album.png" mode="aspectFit" class="action-icon"></image>
                    <text>评论</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            // 轮播图数据
            bannerList: [
                'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg',
                'https://heda123.oss-cn-guangzhou.aliyuncs.com/upload/3/20250121/e41d7fe8ead48f06290c699d6d6d36e9.jpg'
            ]
        }
    }
}
</script>

<style lang="scss">
.note-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;

    .banner-swiper {
        width: 100%;
        height: 500rpx;

        .banner-image {
            width: 100%;
            height: 100%;
        }
    }

    .content-scroll {
        flex: 1;
        overflow: hidden;

        .title-section {
            padding: 30rpx 20rpx;
            background: #fff;
            margin-bottom: 20rpx;

            .main-title {
                font-size: 36rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
            }

            .view-count {
                display: flex;
                align-items: center;
                color: #999;
                font-size: 24rpx;

                .view-icon {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 8rpx;
                }
            }
        }

        .content-section {
            padding: 30rpx 20rpx;
            background: #fff;
            margin-bottom: 20rpx;

            .paragraph {
                font-size: 28rpx;
                color: #333;
                line-height: 1.6;
                margin-bottom: 20rpx;
                display: block;
            }
        }

        .comment-section {
            padding: 30rpx 20rpx;
            background: #fff;

            .comment-header {
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;

                .comment-title {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                }

                .comment-count {
                    font-size: 28rpx;
                    color: #999;
                    margin-left: 8rpx;
                }
            }
        }

        .bottom-placeholder {
            height: 120rpx; // 与底部栏高度相同
        }
    }

    .author-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 20rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);

        .author-info {
            display: flex;
            align-items: center;
            flex: 1;

            .author-avatar {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
                margin-right: 20rpx;
            }

            .author-name {
                font-size: 28rpx;
                color: #333;
                font-weight: 500;
            }
        }

        .action-buttons {
            display: flex;
            align-items: center;

            .action-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-left: 40rpx;

                .action-icon {
                    width: 44rpx;
                    height: 44rpx;
                    margin-bottom: 4rpx;
                }

                text {
                    font-size: 24rpx;
                    color: #666;
                }
            }
        }
    }
}

// 自定义轮播图指示点样式
:deep(.wx-swiper-dots) {
    .wx-swiper-dot {
        width: 12rpx;
        height: 12rpx;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        margin: 0 8rpx;

        &.wx-swiper-dot-active {
            width: 24rpx;
            border-radius: 12rpx;
            background: #2ed573;
        }
    }
}
</style>
